<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<!--
//
// Copyright 2007-2010 Qianyan Cai
// Under the terms of the GNU Lesser General Public License version 2.1
//
-->
<html>
<head>
<meta name=Content-Type content="text/html; charset=UTF-8" http-equiv=Content-Type>
<title>Chat - Objot demo</title>


<!--@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->


<style>
body { width:100%; height:100%; margin:0; padding:0; font-family:sans }
h2 { margin:0; padding:1ex 0 1ex; text-align:center; }
a { text-decoration:none; }
a:hover { background:#ddf; }
p { margin:1em 0; }
label { display:-moz-inline-box; display:inline-block; }
button { background:#fd6; border:1px solid #66f; }
table { width:100%; }

/*********************************************************************************************/

.Http,
.Err {}
.Http-icon,
.Err-icon {
	padding:0 8px; font-size:16px; /* -moz-inline-box issue */
	#display:inline-block; #padding:0; #width:16px; #height:16px;
}
.Http-icon { background:url(http.gif) no-repeat 0 center; }
.Err-icon { background:#e66 url(error.gif) no-repeat 0 center; }
.Http-text { margin-left:1ex; }
.Err-text { margin-left:1ex; color:red }

.Pop-back { background:black; opacity:0.5; filter:alpha(opacity=50); }

/*********************************************************************************************/

#SignIn {
	display:table-cell; display:inline-block;
	padding:0 1em; text-align:left;
	background:#e8f0ff; border:1px solid blue;
}
#SignIn label { width:12ex; }
#SignIn input { #width: 20ex; }
#SignIn .Http { margin-left:1ex; }

#SignOut { margin:0 1em 1ex; text-align:right; }

/*********************************************************************************************/

#Me { width:30%; padding:1em; vertical-align:top; background:#e8f0ff; }
#Me .min { width:16em; height:0; }
#Me .Http,
#Me .Err { margin-left:1ex; }

#Me .name { display:block; clear:both; float:left; }
#Me .do { display:block; clear:right; float:right; }
#Me .friends { clear:both; overflow:hidden; height:1%; margin:1em 0; background:white; }
#Me .friends .name { padding:0 1ex; }

/*********************************************************************************************/

#Chatss { width:60%; padding:1em; vertical-align:top; background:#fff0e8; }
#Chatss .min { width:30em; height:0; }
#Chatss .Http,
#Chatss .Err { margin-left:1ex; }

#Chatss .tabs { display:block; clear:both; float:left; }
#Chatss .do { display:block; clear:right; float:right; }
#Chatss .tab { padding:0 1ex; }
#Chatss .tabAct { background:#ddf }
#Chatss .tabNew { font-weight:bold; font-style:italic; }
#Chatss .chatss { clear:both; }
#Chatss .chats { background:white; margin-bottom:1em; }
#Chatss .datime { margin-right:1em; color:#470; }
#Chatss .name { color:#008; }
#Chatss .text { margin:0 0 1ex 2em; }
#Chatss .text img { margin-left:1ex }
#Chatss .in { font-weight:bold; }
#Chatss .post { clear:both; float:left; width:80%; height:4em; }

</style>
</head>


<!--@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->


<body>
<noscript>Javascript is required</noscript>
<!-- these scripts access <body> immediately so load them inside <body> -->
<script src="../objot22.js"></script>
<script src="chat.js"></script>


<!--@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-->


<h2>Chat - <a href=http://objot.com>Objot</a> demo</h2>
<div id=SignOut><a href="javascript:location.reload()">Sign out</a></div>
<table cellspacing=0 cellpadding=0><tr>
	<td id=Me><div class=min><!--stupid IE--></div>
	<td id=Chatss><div class=min><!--stupid IE--></div>
</table>
</body>
</html>
